<template>
  <div class="container">
    <div class="tab">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="typeList.length>0">
      <el-tab-pane :label="item" :name="item" v-for="(item, index) in typeList" :key="index">
        <!-- 主体 -->
        <div class="top">获得 {{ curList.length }} 条结果</div>
        <div class="main" v-if="list.length>0">
          <el-row>
            <el-col
              v-for="(item, index) in curList"
              :key="index"
              :span="6"
            >
              <el-card :body-style="{ padding: '0px' }" >
                <el-image
                  :src="item.imgUrl"
                  class="image"
                  :fit="cover"

                  :preview-src-list="[item.imgUrl]"
                />
                <div class="bottom">
                  <span style="font-weight: 600;">{{ item.name }}</span>
                  <span style="color: #333">{{ `《${item.title}》` }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="nofind" v-else>未找到结果</div>
      </el-tab-pane>
      <!-- <el-tab-pane label="行书" name="行书">
        <div class="top">获得 {{ list.length }} 条结果</div>
        <div class="main" v-if="list.length>0">
          <el-row>
            <el-col
              v-for="(item, index) in list[0].data"
              :key="index"
              :span="6"
            >
              <el-card :body-style="{ padding: '0px' }" >
                <el-image
                  :src="item.imgUrl"
                  class="image"
                  :fit="cover"
                />
                <div style="padding: 14px">
                  <span>{{ item.name }}&nbsp;&nbsp;&nbsp;</span>
                  <span>{{ item.title }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="nofind" v-else>未找到结果</div>
      </el-tab-pane>
      <el-tab-pane label="草书" name="草书">草书</el-tab-pane>
      <el-tab-pane label="隶书" name="隶书">隶书</el-tab-pane>
      <el-tab-pane label="篆书" name="篆书">篆书</el-tab-pane> -->
    </el-tabs>
    </div>
    <div class="page">
      <el-pagination
      v-model:current-page="currentPage1"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, prev, pager, next"
      :page-size="1"
      :total="list.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
  </div>
</template>

<script>
import { onMounted, ref, watch } from 'vue'
import { searchList } from '@/api/search'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import Message from '@/components/library/Message'
export default {
  name: 'lt-search',
  setup () {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const typeList = ref(['楷书', '行书', '草书', '隶书', '篆书'])

    const character = ['的', '一', '国', '在', '人', '了', '有', '中', '是', '年', '和', '大', '业', '不', '为', '发',
      '会', '工', '经', '上', '地', '市', '要', '个', '产', '这', '出', '行', '作', '生', '家', '以', '成', '到', '日', '民',
      '来', '我', '部', '对', '进', '多', '全', '建', '他', '公', '开', '们', '场', '展', '时', '理', '新', '方', '主', '企',
      '资', '实', '学', '报', '制', '政', '济', '用', '同', '于', '法', '高', '长', '现', '本', '月', '定', '化', '加', '动',
      '合', '品', '重', '关', '机', '分', '力', '自', '外', '者', '区', '能', '设', '后', '就', '等', '体', '下', '万', '元',
      '社', '过', '前', '面']
    console.log(character)

    watch(
      () => route.query.key,
      (newValue) => {
        getSearchList(newValue, activeName.value)
      }
    )
    // 分页
    const currentPage1 = ref(1)
    const handleSizeChange = (val) => {
      console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val) => {
      // console.log(`current page: ${val}`)
      curList.value = list.value[val - 1].data
    }
    // tab
    const activeName = ref('楷书')
    const curList = ref([])
    const list = ref([])
    let key = route.query.key
    const handleClick = (tab) => {
      activeName.value = tab.paneName
      currentPage1.value = 1
      getSearchList(key, tab.paneName)
    }
    function toLogin () {
      router.push({ path: '/login' })
    }
    function getSearchList (name, type) {
      key = name
      searchList({ name, type }).then(res => {
        // console.log(res)
        if (res.code === '404') {
          list.value = []
        } else if (res.code === '999') {
          Message({ type: 'error', text: res.msg })
          toLogin()
        } else {
          list.value = res.data
          curList.value = res.data[0].data
          // console.log(list.value)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function toDetails (imgurl) {
      router.push({ path: '/details', query: { url: imgurl } })
    }

    onMounted(() => {
      store.dispatch('home/setActive', '0')
      getSearchList(key, activeName.value)
      // console.log(route.query.key)
      // curList.value = list.value[1].data
    })
    return { activeName, handleClick, getSearchList, list, currentPage1, handleSizeChange, handleCurrentChange, curList, typeList, toDetails }
  }
}
</script>

<style scoped lang='less'>
.container {
    width: 76vw;
    margin: 0 auto;
    position: relative;
    .tab{
      // display: flex;
      // justify-content: center;
      // align-items: center;
      .top{
        font-size: 12px;
        margin-bottom: 10px;
      }
    }
    .main{
        .time {
            font-size: 12px;
            color: #999;
          }

          .bottom {
            padding: 15px 0 15px 15px;
          }

          .button {
            padding: 0;
            min-height: auto;
          }

          .image {
            width: 50%;
            // height: 100px;
            margin: 10px 0 0 70px;
            display: block;
            cursor: pointer;
          }
    }
    .page{
      margin-top: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
}

</style>
